<template>
  <div class="container">
    <div class="nav">
      <ul>
        <li>
          <a href="/BridgeTraffic">大桥上的交通</a>
        </li>
        <li>
          <a href="/Plant">工厂</a>
        </li>
        <li>
          <a href="/Test">测试</a>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
  
</template>

<script setup lang="ts">


</script>

<style scoped>

  

  .container{
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .nav {
    position: fixed;
    z-index: 100;
    left: 0px;
    width: 300px;;
    height: 100%;
    overflow: auto;
    border-right: 1px solid #E8E8E8;
    display: flex;
    flex-direction: column;
    transition: 0s 0s height;
  }

  .content {
    position: absolute;
    border: 0px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-left: 300px;
  }
</style>